<template>
	<view>
		<view style="margin-left: 20rpx;">
			<view class="group_5" v-if="imgList.length==0">
				<view class="image-text_3" @click="ChooseImage">
					<image
						src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngaae24f3de3c3e573b14cfe608f02d2eebeb63db299bc7212756e34b5997a37f4"
						class="image_3"></image>
					<text lines="1" class="text-group_1">上传活动封面图</text>
				</view>
			</view>

			<view class="cu-form-group margin-top" style="margin-right: 20rpx; border-radius: 30rpx;" v-else>
				<view class="grid col-1 grid-square flex-sub margin-top-sm">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
						:data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
				</view>
			</view>

			<view class="text-wrapper_1">
				<text class="text_5">活动标题</text>
				<input placeholder="请输入" class="text_6" v-model="activity_name"></input>
			</view>

			<view class="group_6">
				<view class="text-group_4">
					<text lines="1" class="text_5">活动介绍</text>
					<textarea placeholder="请输入" v-model="activity_summary" :auto-height="true"
						class="margin-top"></textarea>
				</view>
			</view>

			<view class="text-wrapper_1">
				<text class="text_5">活动地址</text>
				<uni-data-picker :localdata="items" :border="false" @change="regionchange">
					<view class="flex justify-center">
						<text class="text_6">{{address}}</text>
						<view style="margin-top: 12rpx" class="cuIcon-right text-gray"></view>
					</view>
				</uni-data-picker>
			</view>
			<view class="text-wrapper_1">
				<text class="text_5">具体地址</text>
				<input placeholder="请输入" class="text_6" v-model="jtaddress"></input>
			</view>
			<view class="text-wrapper_1">
				<text class="text_5">开始时间</text>
				<uni-datetime-picker v-model="dateString" @change="TimeChange">
					<view class="flex justify-center">
						<text class="text_6" style="flex: 1;" v-if="dateString">{{dateString}}</text>
						<text class="text_6" style="flex: 1;" v-else>请选择</text>
						<view style="margin-top: 12rpx;" class="cuIcon-right text-gray" />
					</view>
				</uni-datetime-picker>
			</view>

			<!-- <view class="text-wrapper_1">
				<text class="text_5">结束时间</text>
				<uni-datetime-picker v-model="endDateString" :disabled="dateString==''" type="date" :start="startTime"
					:end="endTime" @change="endTimeChange">
					<view class="flex justify-center">
						<text class="text_6" style="flex: 1;" v-if="endDateString">{{endDateString}}</text>
						<text class="text_6" style="flex: 1;" v-else-if="dateString==''">请先选择开始时间</text>
						<text class="text_6" style="flex: 1;" v-else>请选择</text>
						<view style="margin-top: 12rpx;" class="cuIcon-right text-gray" />
					</view>
				</uni-datetime-picker>
			</view> -->

			<view class="text-wrapper_1">
				<text class="text_5">联系电话</text>
				<input placeholder="请输入" class="text_6" v-model="phone_number"></input>
			</view>
			<view class="text-wrapper_1">
				<text class="text_5">主办方单位</text>
				<input placeholder="请输入" class="text_6" v-model="organizer"></input>
			</view>
			<view class="text-wrapper_1">
				<text class="text_5">主办方电话</text>
				<input placeholder="请输入" class="text_6" v-model="organizer_phone"></input>
			</view>
			<view class="text-wrapper_1">
				<text class="text_5">参与人数</text>
				<input placeholder="请输入" class="text_6" v-model="participants_count"></input>
			</view>
			<view class="text-wrapper_1">
				<text class="text_5">发布时长</text>
				<input placeholder="请输入" class="text_6" v-model="publish_duration"></input>
			</view>

		</view>


		<view class="text-center" style="margin-top:50rpx;" @click="submit">
			<button class="cu-btn lg round" style="width: 80%;background: #994278;color: #FFFFFF;">提交发布</button>
		</view>



	</view>
</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				activity_img: '',
				activity_name: '',
				activity_summary: "",
				items: [],
				address: '请选择',
				dateString: '',
				endDateString: "",
				startTime: "",
				endTime: "",
				organizer: '',
				organizer_phone: '',
				phone_number: '',
				participants_count: '',
				publish_duration: '',
				imgList: [],
				jtaddress: '',
			}
		},
		onLoad() {
			var that = this;
			app.get('ApiIndex/getCustom', {}, function(customs) {

				var url = app.globalData.pre_url + '/static/area.json';
				if (customs.data.includes('plug_zhiming')) {
					url = app.globalData.pre_url + '/static/area_gaoxin.json';
				}
				console.log(url)
				uni.request({
					url: url,
					data: {},
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: function(res2) {
						that.items = res2.data
					}
				});
			});
		},
		methods: {
			submit() {
				this.upImg()
			},
			submitEnd(){
				const data = {
					activity_img: this.activity_img,
					activity_name: this.activity_name,
					activity_summary: this.activity_summary,
					location: this.address + this.jtaddress,
					phone_number: this.phone_number,
					organizer: this.organizer,
					organizer_phone: this.organizer_phone,
					activity_time: this.dateString,
					participants_count: this.participants_count,
					publish_duration: this.publish_duration
				}
				console.log(data)
				app.post("ApiActivityPublish/addactivity", data, (res) => {
					console.log(res)
					if (res.status != 1) {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				})
			},
			
			regionchange(e) {
				this.address = ''
				for (var i = 0; i < e.detail.value.length; i++) {
					this.address += e.detail.value[i].text
				}
			},
			TimeChange(e) {
				const dateObj = new Date(e);
				this.startTime = dateObj.toISOString().slice(0, 10);
				dateObj.setDate(dateObj.getDate() + 15);
				this.endTime = dateObj.toISOString().slice(0, 10);
			},
			endTimeChange(e) {

			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					success: (res) => {
						console.log(res)
						this.imgList = res.tempFilePaths
						console.log(this.imgList)
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '点错了',
					confirmText: '是的',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			upImg() {
				uni.uploadFile({
					url: app.globalData.baseurl + 'ApiImageupload/uploadImg/aid/' + app
						.globalData.aid + '/platform/' + app.globalData.platform +
						'/session_id/' + app.globalData.session_id,
					filePath: this.imgList[0],
					name: 'file',
					success:(res)=>{
						console.log(res)
						
						console.log(res.data)
						res.data=JSON.parse(res.data)
						this.activity_img = res.data.url
						console.log(res.data.status)
						if (res.data.status != 1) {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
						}else{
							this.submitEnd()
						}
					},
					fail(res) {
						console.log(res)
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.group_5 {
		background-color: rgba(213, 179, 200, 1.000000);
		border-radius: 30rpx;
		width: 710rpx;
		align-self: center;
		margin-top: 8rpx;
		display: flex;
		flex-direction: row;
		padding: 78rpx 242rpx 78rpx 244rpx;
	}

	.image-text_3 {
		display: flex;
		flex-direction: column;
	}

	.image_3 {
		width: 100rpx;
		height: 100rpx;
		align-self: center;
	}

	.text-group_1 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		white-space: nowrap;
		line-height: 44rpx;
		margin-top: 20rpx;
	}


	.text-wrapper_1 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 30rpx;
		width: 710rpx;
		align-self: center;
		margin-top: 20rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx 30rpx 30rpx;
	}

	.text_5 {
		overflow-wrap: break-word;
		color: rgba(142, 142, 142, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.text_6 {
		overflow-wrap: break-word;
		color: rgba(181, 181, 181, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 44rpx;
	}


	.group_6 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 30rpx;
		width: 710rpx;
		align-self: center;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		padding: 30rpx 552rpx 30rpx 30rpx;
	}

	.text-group_4 {
		display: flex;
		flex-direction: column;
	}
</style>